<template>
  <div class="mainOfMsgBox" ref="box">

    <div class="m-o-m-b-content"
         style="width: 100%;height: 85%;overflow-y: scroll;padding: 20px;box-sizing: border-box;">
      <div
          v-for="(record,index) in store.msgRecord"
          :key="index"
      >

        <div class="word" v-show="record.sendName!==store.name" ref="word">
          <img src="../assets/logo.png">
          <div class="info">
            <p class="time"><strong style="font-size: 16px;font-weight: 600">{{ record.sendName }}
            </strong>&nbsp;&nbsp;&nbsp;{{ record.sendTime }}&nbsp;&nbsp;说：
            </p>
            <div class="info-content">{{ record.content }}</div>
          </div>
        </div>
        <!-- 我的 -->

        <div class="word-my" v-show="record.sendName==store.name">
          <div class="info">
            <p class="time"><strong style="font-size: 16px;font-weight: 600">{{ record.sendName }}
            </strong>&nbsp;&nbsp;&nbsp;&nbsp;{{ record.sendTime }}&nbsp;&nbsp;说：
            </p>
            <div class="info-content">{{ record.content }}</div>
          </div>
          <img src="../assets/logo.png">
        </div>
      </div>

    </div>

    <div class="footer" style="display: flex;flex-direction: row;justify-content: space-around">

      <div style="cursor: pointer;
              border-radius: 15px;
              width:158px;
              height:50px;
              background-color: rgb(29, 144, 245);
              border: 0;
              transition: 0.3s;
              box-shadow: 0px 0px 5px 0px rgb(0 136 255);
              display: flex;
              flex-direction: row;
              padding-right: 8px;
              justify-content: space-around">
        <img @click="getNewMsg" src="@/assets/18-autorenew.svg" alt="" id="send-icon"/>
        <img @click="toBotton" src="@/assets/161-trending-flat-outline.png" alt="" id="send-icon"/>
        <img @click="close" src="@/assets/39-trash.svg" alt="" id="send-icon"/>
      </div>

      <textarea v-model="store.sendContent"></textarea>
      <div @click="send"
           style="cursor: pointer;
              border-radius: 15px;
              width:50px;
              height:50px;
              background-color: rgb(29, 144, 245);
              border: 0;
              transition: 0.3s;
              box-shadow: 0px 0px 5px 0px rgb(0 136 255);">
        <img src="@/assets/rocket.png" alt="" id="send-icon"/>
      </div>

    </div>

  </div>
</template>

<script>
import {useStore} from "@/store/msgBox";
import axios from "axios";
import {computed, ref, watch} from "vue";
import {ElMessage} from 'element-plus'

export default {
  name: "MainOfMsgBox",
  props: ['theActive'],
  setup() {
    const store = useStore()
    let box = ref(null)
    let isReload = true
    let receiver = computed(() => {
      if (store.msgRecord[0].sendName !== store.name) {
        return store.msgRecord[0].sendName
      } else {
        return store.msgRecord[0].receiveName
      }
    })
    // let obj = this.theActive
    let name = computed(() => {
      return JSON.parse(sessionStorage.getItem("userObj")).username
    })
    let localData = ref([])

    function close() {
      store.parties = store.parties.filter(function (item) {
        return item !== receiver.value
      })
      store.sendContent = ''
    }

    function send() {
      // console.log('data',obj)
      if (store.sendContent === '') {
        ElMessage.error("输入不能为空!")
      } else {
        let params = new URLSearchParams()
        params.append("sendName", store.name)
        params.append("receiveName", receiver.value)
        params.append("content", store.sendContent)
        axios.post('http://120.48.51.66:8081/inform/addMessage', params).then(() => {
          console.log("正在发送!")
        })
        store.sendContent = ''
        // let theActive = JSON.parse(sessionStorage.getItem("theActive"))
        setTimeout(() => {
          axios.get('http://120.48.51.66:8081/inform/getMessageListByName', {
            params: {
              userName: store.name,
              otherName: receiver.value
            }
          }).then((response) => {
            store.msgRecord = response.data.data.informList
            localData.value = response.data.data.informList
            sessionStorage.setItem('msgRecord', JSON.stringify(store.msgRecord))
          })
        }, 120)
      }
    }

    function getNewMsg() {
      axios.get("http://120.48.51.66:8081/inform/getSessionByName", {
        params: {
          userName: store.name
        }
      }).then((response) => {
        store.parties = response.data.data.sessionList
        // let isActive = store.parties[0]
        axios.get('http://120.48.51.66:8081/inform/getMessageListByName', {
          params: {
            userName: store.name,
            otherName: receiver.value
          }
        }).then((response) => {
          store.msgRecord = response.data.data.informList
          sessionStorage.setItem('msgRecord', JSON.stringify(store.msgRecord))
        })
            .catch(function (error) {
              console.log(error)
            })
      }).catch(function (error) {
        console.log(error)
      })
    }

    function scrollToBottom() {
      setTimeout(() => {
        console.log(box.value.scrollTop, "top")
        console.log(box.value.scrollHeight, "height")
        box.value.scrollTop = box.value.scrollHeight;
      }, 150)
    }

    function toBotton() {
      scrollToBottom()
    }

    watch(localData, () => {
      console.log("hh")
      scrollToBottom()
    }, {deep: true})

    return {
      store,
      close,
      send,
      receiver,
      isReload,
      scrollToBottom,
      localData,
      box,
      toBotton,
      getNewMsg,
      name,
      // props,
      // obj
    }
  }
  ,
}
</script>

<style scoped>
.mainOfMsgBox {
  width: 96%;
  height: 504px;
  overflow: hidden scroll;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  margin-left: 20px;
  background-color: #f2f3f6;
}

.mainOfMsgBox::-webkit-scrollbar {
  width: 8px;
  height: 1px;
}

.mainOfMsgBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #9e9e9e;
}

.mainOfMsgBox::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}

.mainOfMsgBox img {
  margin-top: 50px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid rgb(255, 255, 255);
}

textarea {
  resize: none;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  outline: none;
  background-color: #F5F6F8;
  width: 70%;
  height: 50px;
  border-radius: 15px;
  border: 2px solid rgb(34, 135, 225);
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 20px;
  color: #000000;
  font-weight: 100;
  margin: 0 20px;
}

.word {
  display: flex;
  margin-bottom: 20px;
}

.info {
  margin-left: 10px;
}

.time {
  /*font-size: 12px;*/
  color: rgba(51, 51, 51, 0.8);
  height: 20px;
  line-height: 20px;
  /*margin: -5px 0 0;*/
  margin: 10px 0;
  /*color: #fff;*/
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
}

.word .info-content {
  /*padding: 10px;*/
  font-size: 14px;
  /*background: rgb(229, 229, 229);*/
  position: relative;
  /*border-radius: 5px;*/
  margin-top: 0;
  max-width: 90%;
  padding: 20px;
  border-radius: 20px 20px 20px 5px;
  background-color: rgb(56, 60, 75);
  color: #fff;
}

.word .info-content::before {
  /*
  position: absolute;
  left: -8px;
  top: 0px;
  content: '';
  border-right: 10px solid rgb(229, 229, 229);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  */
}

.word .info-content:hover {
  background-color: rgb(39, 42, 55);
}

.word-my .info-content {
  /*  max-width: 70%;
    padding: 10px;
    font-size: 14px;
    float: right;
    margin-right: 10px;
    position: relative;
    margin-top: 8px;
    background: #A3C3F6;
    border-radius: 5px;*/
  text-align: left;
  max-width: 90%;
  padding: 20px;
  margin-right: 10px;
  border-radius: 20px 20px 5px 20px;
  background-color: rgb(29, 144, 245);
  color: #fff;
}

.word-my .info-content:hover {
  background-color: rgb(26, 129, 219);
}

.word-my {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.word-my .info-content::after {
  /*  position: absolute;
    right: -8px;
    top: 8px;
    content: '';
    border-left: 10px solid #A3C3F6;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;*/
}

.footer {
  width: 98%;
  height: 52px;
}

#reflesh-icon {
  margin-top: 10px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: none;
}

#bottom-icon {
  margin-top: 10px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: none;
}

#send-icon {
  margin-top: 10px;
  margin-left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: none;
}

</style>
